<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
  <div class="alarmDefinition">
    <!-- <nutbTitle title="指令查询"></nutbTitle> -->
    <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
      :buttons="fyButtons">
      <NuformItem label="参数名称" prop="deviceName" width="320px">
        <nu-input type="text" v-model="formData.paramName" size="middle" placeholder="请输入"></nu-input>
      </NuformItem>
      <NuformItem label="编辑时间" prop="date" width="520px">
        <el-date-picker v-model="formData.date" type="datetimerange" style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </NuformItem>
      <div class="btnBox">
        <nu-button type="primary" class="searchButton" @click="searchTable">搜索</nu-button>
        <nu-button class="searchButton" @click="clearParams">清除</nu-button>
      </div>
    </NuVerifyForm>
    <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
      :operates="operates(this)" :pagination="pagination" @handleSizeChange="handleSizeChange"
      @handleChangePage="handleChangePage">
    </NuTableList>
    <nu-dialog :title="dialogTitle" :visible.sync="dialogShow" width="40%" center :close-on-click-modal="false" top="5vh"
      :modal-append-to-body="false" @close="diaClose">
      <div class="dialogHeaderSearch">
        <NuVerifyForm :model="dialogFormData" ref="dialogFormData" label-width="100px" class="submitForm"
          @submitForm="diaSubmitForm" :buttons="fyButtons">
          <NuformItem label="参数名称" prop="paramName" width="70%" :rules="[{ required: true, message: '参数名称不能为空' }]">
            <nu-input type="text" v-model="dialogFormData.paramName" size="middle"></nu-input>
          </NuformItem>
          <NuformItem label="参数值" prop="paramValue" width="70%" :rules="[{ required: true, message: '参数值不能为空' }]">
            <nu-input type="text" v-model="dialogFormData.paramValue" size="middle"></nu-input>
          </NuformItem>
          <NuformItem label="编辑时间" prop="updateDate" width="70%" :rules="[{ required: false, message: '编辑时间不能为空' }]">
            <el-date-picker v-model="dialogFormData.updateDate" type="datetime" style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :disabled="true">
            </el-date-picker>
          </NuformItem>
          <NuformItem label="编辑人" prop="updateBy" width="70%" :rules="[{ required: false, message: '编辑人不能为空' }]">
            <nu-input type="text" v-model="dialogFormData.updateBy" size="middle" :disabled="true"></nu-input>
          </NuformItem>
        </NuVerifyForm>
        <nu-button class="dialogSearchButton" type="primary" @click="diaSave" v-if="dialogTitle == '编辑'">保存</nu-button>
        <nu-button class="dialogSearchButton" type="primary" @click="diaSave" v-if="dialogTitle == '新增'">新增</nu-button>
        <nu-button class="dialogSearchButton" type="primary" @click="diaClose">关闭</nu-button>
      </div>
    </nu-dialog>
  </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue";
import nutbTitle from "@/components/base/tableTitle.vue";
import NuVerifyForm from "@/components/verify-form";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import nuSelect from "@/components/base/select";
import nuButton from "@/components/base/button";
import NuTableList from "@/components/tableList/TableFormList";
import nuDialog from "@/components/base/dialog";
import axios from "axios";
import { getToken } from "@/utils/auth";
const operates = (that) => [
  {
    label: '修改',
    icon: '',
    width: '50px',
    isShow: row => {
      return true;
    },
    disabled: row => {
      return false;
    },
    method: row => {
      that.openEdit(row);
    },
  },
  {
    isShow: (row) => {
      return false;
    },
  }
];
export default {
  name: "alarmDefinition",
  components: {
    nuCol,
    nutbTitle,
    NuVerifyForm,
    NuformItem,
    nuInput,
    nuSelect,
    nuButton,
    NuTableList,
    nuDialog,
  },
  data() {
    return {
      formData: {
        date: [],
        deviceName: "",
        updateStartDate: "",
        updateEndDate: ""
      },
      operates,
      dialogFormData: {
        paramName: '',
        paramValue: '',
        updateDate: '',
        updateBy: ''
      },
      fyButtons: [],
      currentRow: null,
      pagination: {
        pageSize: 20,
        total: 0,
        pageNum: 1,
      },
      dialogTitle: "",
      dialogShow: false,
      columns: [
        {
          label: "序号",
          prop: "ranking",
          width: "70px",
          render: (h, params) => {
            return h(
              "span",
              params.index +
              1 +
              (this.pagination.pageNum - 1) * this.pagination.pageSize
            );
          },
        },
        {
          label: "参数名称",
          prop: "paramName",
        },
        {
          label: "参数值",
          prop: "paramValue",
          width: 200
        },
        {
          label: "编辑时间",
          prop: "updateDate",
        },
        {
          label: '编辑人',
          prop: 'updateBy',
        }
      ],
      dataSource: [],
      options: {
        "default-expand-all": true,
        "element-loading-background": "rgba(225,239,242)",
        "element-loading-text": "数据正在加载中",
        "row-key": "pid",
        "header-cell-style": {
          background: "rgba(105, 159, 209, 0.7)",
          color: "#fff",
          fontWeight: "bold",
          fontsize: "16px",
        },
        height: "calc(100vh - 240px)",
        props: {
          fixed: "right",
        },
      }
    };
  },
  computed: {
  },
  created() {

  },
  mounted() {
    this.getConfList();
  },
  methods: {
    /**
     * 查询
     */
    searchTable() {
      this.$refs["formData"].searchForm("form");

    },
    /**
     * form组件内置查询事件
     */
    searchForm(val) {
      if (val) {
        this.getConfList();
      }
    },
    /**
     * 每页条数变化事件
     */
    handleSizeChange(val) {
      this.pagination.pageNum = 1;
      this.pagination.pageSize = val;
      this.getConfList();
    },
    /**
     * 改变分页触发事件
     */
    handleChangePage(val) {
      this.pagination.pageNum = val;
      this.getConfList();
    },
    /**
     * 清除数据
     */
    clearParams() {
      this.resetForm("formData");
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm("form");
      for (let k in this[formName]) {
        if (
          Object.prototype.toString.call(this[formName][k]) == "[object String]"
        ) {
          this[formName][k] = "";
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Array]"
        ) {
          this[formName][k] = [];
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Number]"
        ) {
          this[formName][k] = "";
        }
      }
    },
    /**
   * 表格-编辑
   */
    openEdit(row) {
      this.dialogTitle = "编辑";
      this.dialogShow = true;
      Object.assign(this.dialogFormData, row);
    },
    /**
   * dialogFormData组件内置提交事件
   */
    diaSubmitForm(val) {
      if (val) {
        if (this.dialogTitle == '编辑') {
          this.editConfList()
        } else if (this.dialogTitle == '新增') {
        }
      }
    },
    /**
   * 弹窗-保存
   */
    diaSave() {
      this.$refs['dialogFormData'].submitForm('form');
    },
    /**
   * 弹窗-关闭
   */
    diaClose() {
      this.dialogShow = false
      this.resetForm('dialogFormData')
    },
    /**
     * 获取表格数据
     */
    getConfList() {
      let postData = {
        ...this.formData,
        updateStartDate: this.formData.date[0],
        updateEndDate: this.formData.date[1],
        ...this.pagination
      };
      delete postData.date
      for (let k in postData.query) {
        if (
          postData.query[k] &&
          Object.prototype.toString.call(postData.query[k]) == "[object String]"
        ) {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpGet(window.api.confList, postData)
        .then((res) => {
          if (res.code == 200) {
            this.pagination.total = res.total;
            this.dataSource = res.rows;
            this.diaClose();
          } else {
          }
        })
        .catch((err) => { });
    },
    /**
   * 编辑接口
   */
    editConfList() {
      let postData = {
        ...this.dialogFormData,
      };
      for (let k in postData.query) {
        if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpPost(window.api.confEdit, postData).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.getConfList()
        } else {
        }
      }).catch(err => {

      });
    },
  },
};
</script>
    
<style scoped lang="scss">
.alarmDefinition {
  height: 100%;
}

.searchForm {
  // height: calc(100% - 40px);
  display: flex;
  position: relative;
  flex-wrap: wrap;
  padding-right: 160px;
}

.submitForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btnBox {
  display: flex;
  // float: right;
  z-index: 10;
  position: absolute;
  // top: 15px;
  right: 10px;
  margin: 10px 0 0 0;
}

.dialogHeaderSearch {
  background-color: var(--model-bgc);
  padding: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
}

::v-deep .el-form-item {
  margin: 0;
  margin-bottom: 16px !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: var(--input-disabled-color) !important;
  cursor: not-allowed !important;
  background-color: var(--input-disabled-bgc) !important;
}
</style>